$marginLeft: 5%;
$contentWidth: 90%;
$toolHeight: 25px;
$toolPadding: 15px;

.mui-badge {
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  padding: 3px 6px;
  color: #333;
  border-radius: 100px;
  background-color: rgba(0,0,0,.15);
}

.draw {
  width: 100%;

  .draw-context {
    margin-top: 20px;
    margin-left: $marginLeft;
    width: $contentWidth;
    height: 50vw;
  }

  .draw-tool {
    margin-left: $marginLeft;
    width: $contentWidth;
    background-color: #ddd;
    position: relative;
    .draw-color {
      height: $toolHeight;
      span {
        margin-right: $toolPadding;
        border: 1px solid #fff;
      }
      .black {
        border: 2px solid #000;
      }
    }

    .draw-size {
      margin-top: 10px;
      height: $toolHeight;
      .draw-size-body {
        float: left;
        margin-right: 11px;
        width: $toolHeight;
        height: $toolHeight;
        .draw-circle {
          background-color: #888;
          margin: auto auto;
          border-radius: 100%;
        }
        .select {
          background-color: red;
          border: 1px solid red;
        }
      }
    }
    .eraser {
      position: absolute;
      top: 5px;
      right: 10px;
      .select {
        border-color: red;
      }
    }
  }
}
.remarkText {
  position: absolute;
  bottom: 0;
  left: 5px;
  right: 5px;
  overflow: auto;
  border: 1px solid #ccc;
}